import React from "react";
import { DragSource } from "react-dnd";
import { dndTypes } from "../../../../constants";
import { getEmptyImage } from 'react-dnd-html5-backend';

const spec = {
    beginDrag: props => ({ node: { ...props.data } }),
    canDrag: ({ data }) => data.draggable || data.draggable === void 0
};
const collect = (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    canDrag: monitor.canDrag()
});

@DragSource(dndTypes.TABLE, spec, collect)
export default class TableItem extends React.Component {
    componentDidMount() {
        const { connectDragPreview } = this.props

        if (connectDragPreview) {
            connectDragPreview(getEmptyImage(), {
                captureDraggingState: true,
            });
        }
    }

    render() {
        const { connectDragSource, data, style, canDrag } = this.props;
        const { text, name } = data;

        return connectDragSource(
            <div
                style={style}
                title={name}
                className={`edc-ds-table-item edc-ds-ellipsis ${text ? 'text' : ''} ${!canDrag ? 'edc-ds-disabled' : ''}`}
            >
                {text || name}
                <p>{text ? name : ''}</p>
            </div>,
            { dropEffect: 'copy' }
        );
    }
}